<!-- 就近加油 -->
<template>
	<view class="container">
		<u-navbar title="就近加油" bg-color="#00000000" leftIcon=" " titleStyle="color:#fff" leftIconColor="#fff"
			placeholder is-back="false" back-icon-name="chat"></u-navbar>

		<view class="search">
			<u-search placeholder="请输入要搜索的内容" search-icon-color="blue" show-action="flase" action-text="" height="85rpx"
				color="#CCCCCC"></u-search>

			<span>地图<br>模式</span>
		</view>

		<view class="buttons">
			<view class="btn">90#</view>
			<view class="btn">92#</view>
			<view class="btn">93#</view>
			<view class="btn">95#</view>
			<view class="btn">97#</view>
			<view class="btn">98#</view>
		</view>

		<view>
			<navigator class="box">
				<view><span style="font-size: 20px;font-weight: bold;">中国石油加油站</span><span
						style="font-size: 10px;color: #1279FD;" class="car">556m</span></view>
				<br>
				<view><span class="red">满200减20</span><span class="red">满500减60</span></view>
				<view class="list">
					<image src="../../static/images/car.png"></image>
					<view class="text">
						<span style="font-size: 15px;">营业时间：周一至周五</span><br>
						<span style="color: red;">￥5.66/升</span><br>
						<span style="font-size: 15px;">山阳区人民路与解放路交叉口</span>
					</view>
				</view>
			</navigator>
			<navigator class="box">
				<view><span style="font-size: 20px;font-weight: bold;">中国石油加油站</span><span
						style="font-size: 10px;color: #1279FD;" class="car">556m</span></view>
				<br>
				<view><span class="red">满200减20</span><span class="red">满500减60</span></view>
				<view class="list">
					<image src="../../static/images/car.png"></image>
					<view class="text">
						<span style="font-size: 15px;">营业时间：周一至周五</span><br>
						<span style="color: red;">￥5.66/升</span><br>
						<span style="font-size: 15px;">山阳区人民路与解放路交叉口</span>
					</view>
				</view>
			</navigator>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			};
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-image: url('../../static/images/header-bg.png');
		background-size: contain;
		background-repeat: no-repeat;
		height: 500px;
		padding: 15px;

		.search {
			display: flex;

			span {
				text-align: center;
				padding: 10px 15px;
				border-radius: 50%;
				background-color: #FF6200;
				border: 3px solid #68b9f7;
				color: #FFE8E0;

			}

		}

		.buttons {
			display: flex;
			justify-content: space-evenly;
			color: white;
			margin: 20px 0;

			.btn {
				border: 1px solid white;
				border-radius: 8px/8px;
				padding: 4px 12px;
			}
		}

		.box {
			padding: 20px 10px;
			background-color: white;
			border-radius: 10px/10px;
			position: relative;
			margin-bottom: 20px;
			.car{
				position: absolute;
				left: 90%;
				top: 10%;
			}

			.red {
				color: #FF5620;
				background-color: #FFECE5;
				padding: 2px 6px;
				border-radius: 6px/6px;
				margin-right: 10px;
				font-size: 14px;
			}
			.list{
				display: flex;
				padding-top: 20px;
				image{
					width: 35%;
					height: 90px;
					border-radius: 10px/10px;
				}
				.text{
					line-height: 30px;
					padding-left: 10px;
				}
			}
		}
	}
</style>